<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no" />
		<title>商品列表</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<style>
			/*//头部*/
			.aui-tab-nav li.active {
				color: #327afa;
				border-bottom: 2px #327afa solid;
			}
			.iConent:before {
				content: "\e700" !important;
			}
			.aui-tab-nav li {
				font-size:15px;
				border-bottom:1px dotted #eee;
			}
		</style>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav">
			<div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
			<div class="aui-title">
				商品列表
			</div>
			<ul class="aui-tab-nav aui-border-t">
				<li class="active" data-type="1" tapmode onclick="switchChange(this)">
					综合
				</li>
				<li data-type="2" tapmode onclick="switchChange(this)">
					新品
				</li>
				<li data-type="3" tapmode onclick="switchChange(this)">
					销量
				</li>
				<li data-type="4" tapmode onclick="switchChange(this)">
					价格
				</li>
				<li tapmode onclick="changeView(this)" view-type="bigPic">
					<i class="aui-iconfont aui-icon-cascades icon-left-coler"></i>
				</li>
			</ul>
		</header>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
			var categoryId = api.pageParam.categoryId;
			var header = $api.dom('header');
			//$api.fixStatusBar(header);
			api.setStatusBarStyle({
				style : 'light'
			});
			var header_h = $api.offset(header).h;
			var body_h = $api.offset($api.dom('body')).h - header_h;
			api.openFrame({
				name : 'categoryList_frm',
				url : 'categoryList_frm.html',
				rect : {
					x : 0,
					y : header_h,
					w : 'auto',
					h : body_h
				},
				pageParam : {
                    categoryId : categoryId
				},
				bounces : true,
				vScrollBarEnabled : false,
				hScrollBarEnabled : false
			});
		}
		
		function switchChange(obj) {
			$('.aui-tab-nav li').removeClass('active');
			$(obj).addClass('active');
			var type = $(obj).attr('data-type');
			api.sendEvent({
			    name: 'categoryType',
			    extra: {
                    categoryType: type
			    }
			})
		}
		function changeView(obj) {
			var viewType = $(obj).attr("view-type");

			api.execScript({
		    	frameName: 'categoryList_frm',
			    script: 'changeView("'+viewType+'")'
			});
				
			if (viewType == "bigPic") {
				//一行两列
				$(obj).attr("view-type", "smallPic");
			} else if (viewType == "smallPic") {
				//一行一列
				$(obj).attr("view-type", "bigPic");
			}
		}
	</script>
</html>
